import 'package:contract_manager/components/components.dart';
import 'package:contract_manager/pages/login/login_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_animate/flutter_animate.dart';

class LoginPage extends GetView<LoginController> {
  LoginPage({Key? key}) : super(key: key);
  final loginFormKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    var logic = Get.find<LoginController>();
    return Scaffold(
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 400),
          child: Card(
            elevation: 8,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            child: Padding(
              padding: const EdgeInsets.all(32),
              child: Form(
                key: loginFormKey,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      '合同管理系统',
                      style:
                          Theme.of(context).textTheme.headlineMedium?.copyWith(
                                fontWeight: FontWeight.bold,
                              ),
                    ).animate().fadeIn(duration: 300.ms),
                    const SizedBox(height: 32),
                    TextFormField(
                      controller: logic.usernameController,
                      decoration: InputDecoration(
                        labelText: '用户名',
                        prefixIcon: const Icon(Icons.person_outline),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                        ),
                        filled: true,
                        fillColor: Theme.of(context).colorScheme.surfaceVariant,
                      ),
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return '请输入用户名';
                        }
                        return null;
                      },
                    ).animate().slideX(
                          begin: -0.2,
                          end: 0,
                          duration: 300.ms,
                        ),
                    const SizedBox(height: 16),
                    TextFormField(
                      controller: logic.passwordController,
                      obscureText: true,
                      decoration: InputDecoration(
                        labelText: '密码',
                        prefixIcon: const Icon(Icons.lock_outline),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                        ),
                        filled: true,
                        fillColor: Theme.of(context).colorScheme.surfaceVariant,
                      ),
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return '请输入密码';
                        }
                        return null;
                      },
                    ).animate().slideX(
                          begin: 0.2,
                          end: 0,
                          duration: 300.ms,
                        ),
                    const SizedBox(height: 16),
                    Row(
                      children: [
                        Obx(() => Checkbox(
                              value: logic.rememberMe.value,
                              onChanged: (value) {
                                logic.rememberMe.value = value ?? false;
                              },
                            )),
                        const Text('记住我'),
                        const Spacer(),
                        TextButton(
                          onPressed: () {
                            // TODO: 实现忘记密码
                          },
                          child: const Text('忘记密码？'),
                        ),
                      ],
                    ),
                    const SizedBox(height: 24),
                    SizedBox(
                      width: double.infinity,
                      height: 48,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                        ),
                        onPressed: () => logic.login(loginFormKey),
                        child: const Text('登录'),
                      ),
                    ).animate().scale(
                          begin: const Offset(0.9, 0.9),
                          end: const Offset(1, 1),
                          duration: 300.ms,
                        ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
